
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-07 10:28:26
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\media\index.tsx
 * jiu
 */
import { useState, useEffect } from 'react'
import './index.scss'
import { Space, Table, Tag, Tooltip, Modal, Upload, Button, Input, Switch, Form, Popover, Transfer, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { useNavigate } from 'react-router-dom'
import { getColorArr } from "@/utils"
import { UploadOutlined } from '@ant-design/icons';
import TransformBox from '@/comment/transformBox';



function Media() {
    const [form] = Form.useForm();
    let navigate = useNavigate()

    let [formData, setFormData] = useState({})
    let getColorArrLen = getColorArr().length

    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        status: boolean
    }
    const SwitchOnchange = (checked: boolean, item: any) => {
        console.log(`Switch checked: ${checked}`, item);
        let arr = datas.map(i => {
            if (i.key === item.key) {
                return { ...i, status: checked }
            }
            return i
        })
        setDatas(arr)
    }


    const [disabled, setDisabled] = useState(false)


    let [tagsList, steTagsList] = useState(['尼玛', '我说', '咋了', '这门亲事我不同意', '尼玛', '我说', '咋了', '这门亲事我不同意', '尼玛', '我说', '咋了', '这门亲事我不同意', '尼玛', '我说', '咋了', '这门亲事我不同意'])





    const columns: ColumnsType<DataType> = [
        {
            title: '媒体ID',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: (<div>
                <span>媒体类型</span>
                <Select
                style={{width:'100px',marginLeft:"10px"}}
                defaultValue={''}
                onChange={(e)=>{
                    console.log(e);
                    
                }}
                    options={[
                        { value: '', label: '全部' },
                        { value: 'jack', label: '音乐' },
                        { value: 'lucy', label: '视频' },
                        { value: 'Yiminghe', label: '文件' },
                    ]}
                />
            </div>),
            dataIndex: 'age',
        },

        {
            title: '标签',
            dataIndex: 'address',
            render: (_, item) => (
                <>
                    <Popover content={(
                        <div className='sceneTag'>
                            <Space size={[0, 8]} wrap>
                                {tagsList.length > 0 && tagsList.map((item, index) => {
                                    return <Tag color={getColorArr()[index % getColorArrLen]} key={index}>{item}</Tag>
                                })}
                            </Space>
                        </div>
                    )} title="场景标签">
                        <div className='tableP'>
                            {tagsList.length > 0 && tagsList.map((item, index) => {
                                return <span key={index}> {item} |&nbsp;</span>
                            })}
                        </div>
                    </Popover>

                </>
            ),

        },
        {
            title: '状态',
            key: 'status',
            render: (_, item) => (
                <>
                    <Switch defaultChecked checked={item.status} onChange={(checked) => { SwitchOnchange(checked, item) }} />
                </>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    <a href='#' onClick={(item) => detailTable(item, 'detail')}>详情</a>
                    <a href='#' onClick={(item) => detailTable(item, 'edit')}>编辑</a>
                    <a href='#' onClick={() => confirm()}>删除</a>
                </Space>
            ),
        },
    ];


    const detailTable = (item: any, type: string) => {
        console.log(item);
        setIsModalOpen(true);
        if (type == "detail") setDisabled(true)
    }


    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            status: false,
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            status: true,
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            status: false,
        },

    ];

    const [datas, setDatas] = useState(data)

    let searchInit = { dim: "" }
    const [search, setSearch] = useState(searchInit)

    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);


    //取消
    const cancel = () => {
        setIsModalOpen(false);
        form.resetFields();
        setDisabled(false)
    }

    //成功走得
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // setIsModalOpen(false);
    };

    //失败走得
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // setIsModalOpen(false);
    };





    //上传
    const onChangeUpload = (e) => {
        console.log(e, "上传");
        if (e.file.response == "success") {
            console.log("上传成功")
        }

    }


    //穿梭框
    let [sourcesList, setSourcesList] = useState([
        {
            id: 1,
            label_name: "尼玛"
        },
        {
            id: 2,
            label_name: "阿斯达"
        },
        {
            id: 3,
            label_name: "打算"
        },
        {
            id: 4,
            label_name: "大多"
        },
        {
            id: 5,
            label_name: "阿斯达"
        },
        {
            id: 6,
            label_name: "得撒奥无"
        },
        {
            id: 7,
            label_name: "萨达"
        },
    ])



    let [targetList, setTargetList] = useState([{
        id: 1,
        label_name: "尼玛"
    },
    {
        id: 2,
        label_name: "阿斯达"
    },
    {
        id: 3,
        label_name: "打算"
    },

    ])



    const setTargetListFn = (targetListObj: any) => {
        setTargetList(() => [...targetListObj])
    }
    useEffect(() => {
        // console.log(targetList, 'targetList');

    }, [targetList])




    //删除确认框
    const [modal, contextHolder] = Modal.useModal();


    //删除确认框 
    const confirm = () => {
        modal.confirm({
            title: '删除',
            content: '是否将该条规则从列表中删除？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
                console.log("你确定要删除");
            },
        });
    };



    return (
        <div className='intention'>
            <div className='title'>
                <Button type="primary" onClick={() => (setIsModalOpen(true), setDisabled(false))}>+ 新建媒体</Button>
                <div className='search'>
                    <Input placeholder="模糊搜索关键字" className='input' value={search.dim} onChange={(e) => setSearch({ ...search, dim: e.target.value })} />
                    <Button type="primary" className='ml_10'>查询</Button>
                    <Button className='ml_10' onClick={() => setSearch(searchInit)}>重置</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={datas} />


            {isModalOpen && <Modal title="新增媒体信息" open={isModalOpen} onCancel={() => { cancel() }} keyboard footer={null} width="800px" className="sceneModal">

                <Form
                    name="basic"
                    labelCol={{ span: 6, offset: 2 }}
                    wrapperCol={{ span: 100 }}
                    style={{ maxWidth: 600, marginTop: "20px" }}
                    initialValues={formData}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                    disabled={disabled}
                >
                    <Form.Item
                        label="媒体类型"
                        name="username"
                        rules={[{ required: true, message: '请输入媒体类型!' }]}
                    >
                        <Select
                            options={[
                                { value: 'jack', label: '音乐' },
                                { value: 'lucy', label: '视频' },
                                { value: 'Yiminghe', label: '文件' },
                            ]}
                        />
                    </Form.Item>

                    <Form.Item
                        label="媒体名称"
                        name="username11111112"
                        rules={[{ required: true, message: '请输入媒体名称!' }]}
                    >
                        <Input placeholder='请输入英文场景名' />
                    </Form.Item>



                    <Form.Item
                        label="关联标签"
                        name="weuiad"
                    >
                        <TransformBox sourcesList={sourcesList} targetList={targetList} setTargetList={setTargetListFn} />
                    </Form.Item>



                    <Form.Item
                        label="场景资源"
                        name="username111111"
                    >
                        <Upload
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            onChange={onChangeUpload}
                            listType="picture"
                            maxCount={1}
                        >
                            <Button icon={<UploadOutlined />} >上传场景资源</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button htmlType="button" onClick={() => { cancel() }} className='ml_10'>
                            取消
                        </Button>
                    </Form.Item>
                </Form>


            </Modal>}


            {/* 删除确认对话框 */}
            {contextHolder}
        </div>
    )
}

export default Media
